<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      size="large"
      class="search-form"
    >
      <el-form-item
        v-for="(item, index) in formConifg"
        :label="item.label"
        :prop="item.prop"
        :key="index"
      >
        <component
          :is="item.component"
          v-model="formData[item.prop]"
          v-bind="item.attrs"
          style="width: 100%"
          @change="(val) => (item.change ? item.change(val, formData) : '')"
        ></component>
      </el-form-item>
      <el-form-item class="operate-btn" v-if="operateProps.length">
        <div v-for="item in operateProps" class="btn-item">
          <el-button type="primary" :icon="item.icon" @click="item.handle">{{
            item.text
          }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { Plus, Download } from "@element-plus/icons-vue";
const props = defineProps({
  formConifg: {
    //表单配置项
    type: Array,
    default: () => [],
  },
  formData: {
    type: Object,
    default: () => {},
  },
  operateProps: {
    //按钮组配置
    type: Array,
    default: [],
  },
});
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 25%;

    :deep(.el-form-item__label-wrap) {
      padding-left: 12px;
    }
  }

  .operate-btn {
    flex-grow: 1;
    :deep(.el-form-item__content) {
      display: flex;
      justify-content: end;
      .btn-item {
        margin-right: 10px;
        &:last-child {
          margin-right: 0px;
        }
        .el-button {
          max-width: 70px;
        }
      }
    }
  }
}
</style>
